<!-- 薪资排行 -->
<template>
	<view>
		
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">排行榜</block>
		</cu-custom>
		
		<view class="contaier" style="background-color: #FFFFFF;">
			<view class="top_bg">
				<view class="one_box">
					<!-- 第二名 -->
					<view class="top3">
						<view class="num_two">
							<image class="huangguan2" src="@/static/rank/two.png"></image>
							<image mode="aspectFill" 
							class="top3_head" :src="secondHot.headImgurl"></image>
							<!-- <view class="top_name">{{twoName}}</view> -->
							<view class="top_name">{{secondHot.nickName}}</view>
							<view class="top_sy cuIcon-hot">{{secondHot.hot}}</view>
						</view>
					</view>
					

					<!-- 第一名 -->
					<view class="top3">
						<view class="num_one">
							<image class="huangguan1" src="@/static/rank/one.png"></image>
							<image mode="aspectFill" 
							class="top3_head" :src="firstHot.headImgurl"></image>
							<!-- <view class="top_name" style="font-size: 30rpx;">{{oneName}}</view> -->
							<view class="top_name text-bold" style="font-size: 30rpx;">{{firstHot.nickName}}</view>
							<view class="top_sy cuIcon-hot">{{firstHot.hot}}</view>
						</view>
					</view>

					<!-- 第三名 -->
					<view class="top3">
						<view class="num_three">
							<image class="huangguan2" src="@/static/rank/three.png"></image>
							<image mode="aspectFill" 
							class="top3_head" :src="thirdHot.headImgurl"></image>
							<view class="top_name">{{thirdHot.nickName}}</view>
							<view class="top_sy cuIcon-hot">{{thirdHot.hot}}</view>
						</view>
					</view>
				</view>

				<view class="number_sy_box">
					<view class="number_sy_box_title">
						<text>数据统计</text>
						<text style="position: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;">
							截止：{{nowTime}}
						</text>	
					</view>
					<view class="number_sy_main">
						<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
							<view class="number_num1 text-them">{{dataCount.dailyCount}} 次</view>
							<view class="danwei">日常总数</view>
						</view>
						<view style="width: 50%; text-align: center; z-index: 9999;">
							<view class="number_num2 text-them">{{dataCount.catCount}} 只</view>
							<view class="danwei">在读猫猫</view>
						</view>

						<image mode="widthFix" class="xiaoding_bg" src="@/static/rank/Intersect.png"></image>
					</view>
				</view>
			</view>

			<view class="rankList_box">
				<view class="rankItem" v-for="(item,index) in rankList" :key="index">
					<view class="rankIndex">
						<text>{{ index + 4 }}</text>
					</view>
					<view class="HeardBox">
						<image class="rankHeard" 
						mode="aspectFill" 
						:src="item.headImgurl"
						></image>
					</view>

					<view class="NameBox">
						<!-- <view class="userName">{{item.name}}</view> -->
						<view class="userName text-bold">{{item.nickName}}</view>
						<!-- <view class="userPost text-gray">{{item.post}}</view> -->
						<!-- <view class="color_ccc">{{item.city}} ｜ <text class="text-blue">{{item.salary}}</text>元/月</view> -->
					</view>
					<view class="download_box">
						<!-- <view  class="cuIcon-hot text-them">{{item.hot}}</view> -->
						<!-- 0,1,2 -->
						<view v-if="index<3 " class="cuIcon-hot text-orange">{{item.hot}}</view>
						<!-- 3,4,5,6 -->
						<view v-if="index>2 " class="cuIcon-hot text-blue">{{item.hot}}</view>
					</view>
				</view>
			</view>
			
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 时间
				nowTime: '',
				// 前三名
				firstHot: {
					headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
					nickName: '虚位以待',
					hot: 0,
				},
				secondHot: {
					headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
					nickName: '虚位以待',
					hot: 0,
				},
				thirdHot: {
					headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
					nickName: '虚位以待',
					hot: 0,
				},
				//后面七名
				rankList: [{
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					}, {
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					}, {
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					},
					{
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					},
					{
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					},
					{
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					},
					{
						headImgurl: 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png',
						nickName: '虚位以待',
						hot: 0,
					}
				],
				
				dataCount: {
					dailyCount: 0,
					catCount: 0.
				}
			}
		},
		onLoad() {
			this.getTime();
			this.getHotRanks();
			this.getDataCount();
		},
		methods: {
			// 获取统计信息
			getDataCount(){
				this.$u.api.getDataCount({}).then(res=>{
					console.log("统计数据：",res)
					
					if(res.code == 200){
						this.dataCount.dailyCount = res.data.allDaily
						this.dataCount.catCount = res.data.allCat
					}
				})
			},
			
			// 获取前十
			getHotRanks(){
				this.$u.api.getHotRanks({}).then(res=>{
					console.log("排行榜数据：",res)

					if(res.code == 200){
						// 手动添加前三个
						this.firstHot.headImgurl = this.myimgurl() + res.data[0].catImg
						this.firstHot.hot = res.data[0].id
						this.firstHot.nickName = res.data[0].catName
						
						this.secondHot.headImgurl = this.myimgurl() + res.data[1].catImg
						this.secondHot.hot = res.data[1].id
						this.secondHot.nickName = res.data[1].catName
						
						this.thirdHot.headImgurl = this.myimgurl() + res.data[2].catImg
						this.thirdHot.hot = res.data[2].id
						this.thirdHot.nickName = res.data[2].catName
						
						let catMsg = []
						
						let n = 0
						// 从第四个开始
						for (var i = 3; i < res.data.length; i++,n++) {
							
							catMsg[n] = {};
							catMsg[n]['headImgurl'] = this.myimgurl() + res.data[i].catImg             // 猫咪类型       【根据这个进行分类】
							catMsg[n]['hot'] = res.data[i].id;                    // 猫咪编号       【后面的跳转  根据这个进行分类     ❤❤】
							catMsg[n]['nickName'] = res.data[i].catName;             // 猫咪照片
						}
						this.rankList = catMsg
						console.log("this.rankList：",this.rankList)
					}else{
						this.$refs.uToast.show({
							title: '系统繁忙，请稍后再试！',
							type: 'warning',
							url: ''
						})
					}
				})
			},
			
			
			
			// 获取时间
			getTime: function() {

				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':00';
				this.nowTime = timer
				console.log(this.nowTime);
			},
		},
		filters: {

		}
	}
</script>

<style lang="scss">
	.top_bg {
		width: 750rpx;
		height: 650rpx;
		background: url(https://img.kancloud.cn/9c/05/9c05c9e31d3c80ca875c9d3fcc1c3dba_952x821.png) no-repeat;
		background-size: 750rpx;
		position: relative;
	}

	.one_box {
		width: 750rpx;
		height: 260rpx;
		position: absolute;
		left: 0;
		bottom: 110rpx;
		display: flex;
		justify-content: space-around;
	}

	.one_box .top3 {
		width: 210rpx;
		height: 280rpx;
	}

	.top_name {
		width: 100%;
		height: 55rpx;
		line-height: 60rpx;
		color: #f2f2f2;
		font-size: 26rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.top_sy {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, .7);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.top_sy span {
		font-size: 20rpx !important;
	}

	.num_one {
		position: relative;
	}

	.huangguan1 {
		width: 60px;
		height: 60px;
		position: absolute;
		right: -10rpx;
		top: -18*2rpx;
	}

	.num_one .top3_head {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		margin: 15rpx 0 0 30rpx;
		border: 4rpx solid #ffdd3c;
	}

	.num_two {
		position: relative;
	}

	.huangguan2 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 15rpx;
	}

	.num_two .top3_head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin: 45rpx 0 0 45rpx;
		border: 4rpx solid #bcdcdf;
	}

	.num_three {
		position: relative;
	}

	.huangguan2 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 15rpx;
	}

	.num_three .top3_head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin: 45rpx 0 0 45rpx;
		border: 4rpx solid #e29d85;
	}

	// 第二块
	.number_sy_box {
		width: 700rpx;
		height: 210rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 25rpx;
		border-radius: 20rpx;
		bottom: -115rpx;
		z-index: 999;
		padding: 22rpx;
		box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.1)
	}

	.number_sy_box_title {
		color: #888888;
		// font-weight: 500;
		font-size: 28rpx;
		display: flex;
		z-index: 9999;
		justify-content: space-between;
	}

	.number_sy_main {
		width: 100%;
		height: 124rpx;
		padding-top: 20rpx;
		line-height: 52rpx;
		// background: red;
		display: flex;
		justify-content: space-around;
		position: relative;
	}

	.xiaoding_bg {
		position: absolute;
		right: -22rpx;
		bottom: -30rpx;
		width: 180rpx;
	}

	.number_num1 {
		font-size: 40rpx;
		font-weight: 500;
		
	}

	.number_num2 {
		font-size: 40rpx;
		font-weight: 500;
		
	}

	.danwei {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #c9c9c9;
	}

	// 列表
	.rankList_box {
		width: 750rpx;
		min-height: 200rpx;
		margin-top: 130rpx;
	}

	.rankItem:last-child {
		border: none;
	}

	.rankItem {
		width: 700rpx;
		height: 140rpx;
		margin: 0px auto;
		border-bottom: 1px solid #e9e9e9;
	}

	.rankIndex {
		width: 60rpx;
		height: 140rpx;
		line-height: 140rpx;
		text-align: center;
		color: #CCCCCC;
		font-size: 40rpx;
		float: left;
	}

	.HeardBox {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx;
		border-radius: 100%;
		overflow: hidden;
		float: left;
		margin-right: 25rpx;
		margin-left: 10rpx !important;
	}

	.HeardBox image {
		width: 100%;
		height: 100%;
	}

	.NameBox {
		width: 400rpx;
		height: 140rpx;
		float: left;
		padding-top: 35rpx;
		box-sizing: border-box;
	}

	.NameBox view {
		height: 50rpx;
		line-height: 70rpx;
	}

	.userName {
		min-width: 90rpx;
		font-size: 30rpx;
		float: left;
		margin-right: 20rpx;
	}

	.download_box {
		width: 80rpx;
		height: 140rpx;
		// background-color: red;
		float: right;
		padding-right: 9%;

	}

	.download_box view {
		width: 45rpx;
		margin: 50rpx auto;
		display: block;
		
	}
</style>
